<script setup lang="ts">
import { nextTick, onMounted, ref } from "vue";
import { ElForm, ElFormItem, ElDialog, ElTree, ElButton, ElMessage } from "element-plus";
import { permissionApi } from "@/api/admin/permission";

const isEditor = ref(false);
const visible = ref(false);

class PermissionForm {
  permissionList = [];
  menuId = undefined;
}

const permissionForm = ref<any>(new PermissionForm());
const permissionFormRef = ref<any>(null);

const permissionTree = ref<any>([]);

const permissionTreeRef = ref<any>(null);

const emit = defineEmits(["update"]);

// 打开弹窗
const open = (menuId: string, data: any = null) => {
  if (!menuId) {
    return ElMessage.info("请选择菜单");
  }
  visible.value = true;
  if (data) {
    nextTick(() => {
      permissionForm.value.permissionList = data;
      permissionTreeRef.value.setCheckedKeys(
        data.map((item: any) => {
          return item.value;
        })
      );
    });
  } else {
    permissionForm.value = new PermissionForm();
  }
  permissionForm.value.menuId = menuId;
};

const getPermissionMetaTree = async () => {
  const ret = await permissionApi.permissionMetaTree();
  if (ret.code === 200) {
    permissionTree.value = ret.data;
  } else {
    ElMessage.error(ret.data.msg);
  }
};

onMounted(() => {
  getPermissionMetaTree();
});

// 清除表单数据
const clearForm = () => {
  permissionFormRef.value.resetFields();
};

const handleCancel = () => {
  visible.value = false;
};

// 关闭弹窗
const handleClose = (deno: () => void) => {
  clearForm();
  deno();
};

// 提交
const handleOk = async () => {
  await permissionFormRef.value.validate();
  // console.log(permissionForm.value);
  let ret: any = null;
  permissionForm.value.permissionList = permissionForm.value.permissionList.map(
    (item: any) => {
      return {
        ...item,
        menuId: permissionForm.value.menuId,
      };
    }
  );
  ret = await permissionApi.savePermissionApi(permissionForm.value);
  if (ret.code === 200) {
    ElMessage.success(ret.msg);
    emit("update", permissionForm.value.menuId);
    permissionFormRef.value.resetFields();
    handleCancel();
  } else {
    ElMessage.error(ret.data.msg);
  }
};

// 參數一 当前点击节点对象
const check = (_: any, checkedObj: any) => {
  // console.log(checkedObj);  
  const checkedNodes = checkedObj.checkedNodes;
  // const halfCheckedNodes = checkedObj.halfCheckedNodes;
  // const checkedNodesList = checkedNodes.concat(halfCheckedNodes);
  const checkedNodesList = checkedNodes
  permissionForm.value.permissionList = checkedNodesList;
};

// 自定义树节点类名
const customNodeClass = (data: any) => {
  if (data.children && data.children.length > 1) {
    return "is-tow-children";
  }
  return "";
};

// 暴露方法
defineExpose({
  open,
});
</script>

<template>
  <el-dialog
    :destroy-on-close="true"
    :title="isEditor ? '修改' : '新增'"
    :before-close="handleClose"
    v-model="visible"
  >
    <el-form
      ref="permissionFormRef"
      :model="permissionForm"
      label-position="right"
      label-width="70px"
    >
      <el-form-item prop="permissionList" label="权限">
        <el-tree
          style="max-width: 600px"
          :data="permissionTree"
          ref="permissionTreeRef"
          show-checkbox
          @check="check"
          default-expand-all
          node-key="value"
          :check-on-click-node="false"
          class="menu-tree"
          :props="{
            children: 'children',
            label: (node: any) => node.label,
            class: customNodeClass 
          }"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">
          {{ isEditor ? "提交修改" : "添加" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.menu-tree {
  :deep(.is-tow-children) {
    color: #626aef;
    .el-tree-node__children {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
